<template>
  <div class="time_line_box">
    <div class="time_line_header">
      <div class="header1">
        <span class="header_garden1"></span>
      </div>
      <div class="header2">
        <span class="header_garden2"></span>
      </div>
      <div class="header3">
        <span class="header_garden3"></span>
      </div>
      <div class="header_text">我们与您一起见证我们的成长</div>
    </div>

    <div class="time_line_body">
      <!-- <ul class="time_line_body_box" v-for="(items,i) in heights" :key="i"> -->
      <ul class="time_line_body_box">
           <div class="line_box">
            <div class="line_left"></div>
            <div class="line_right"></div>
          </div>
        <li v-for="(item,year) in lineData" :key="year">
          <div>
            <div class="line_garden">
              <span class="line_garden_child">{{year.substring(0,4)}}</span>
            </div>
            <div class="line_info" v-for="(month, i) in item" :key="month.id">
              <div class="left">
                <div class="_garden">
                  <span class="garden"></span>
                </div>
                <div class="content" v-if="i%2 !=0"  ref="textLeft">
                  <!-- {{ `${month.course_time } ${month.content}`}} -->
                  <div ref="text">
                    {{ month.content}}
                  </div>
                </div>
              </div>
              <div :class="{'right':true, 'last': i == item.length-1 }">
                <div class="content" v-if="i%2 ==0" ref="textRight">
                  <div ref="text">
                    {{ month.content }}
                  </div>
                <!-- {{ `${month.course_time } ${month.content}`}} -->
                </div>
                <div class="_garden" v-if="lastYear==year&&i == item.length-1">
                  <span class="garden"></span>
                </div>
              </div>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>
</template>
<script>
import lineData from "./timeline.json"
export default {
    data(){
        return {
            lineData: lineData.data,
            lastYear: '2021',
            heights: []
        }
    },
    methods: {
      hi(){
        let h_left= this.$refs.textLeft //100
        let h_right= this.$refs.textRight //100
        let h2 = document.getElementsByClassName('left')
        let h3 = document.getElementsByClassName('right')
        // console.log(h2)
        // console.log(h3)
        // console.log(h_left)
        // console.log(h_right)
        for (let i in h_right){
          let h = h_right[i].clientHeight
          console.log(h)
          if (h_right[i].clientHeight > 140){
            h_right[i].parentNode.style.height = h + 50 + 'px'
          }
        }
        for (let i in h_left){
          let h = h_left[i].clientHeight
          if (h_left[i].clientHeight > 140){
            h_left[i].parentNode.style.height = h + 50 + 'px'
          }
        }
      }
    },
    created(){
      // let height= this.$refs.text //100
      // this.height = height
      // for (let i in height){
      //   console.log(height[i].clientHeight)
      // }
    },
     mounted:function(){
            //这是我拿的代理地址的数据，你们需要换成自己的api地址
            // service.get('/api/website/list/course',{params:{type:1}}).then((response) => {
            //   // console.log(response);
            //   this.lineData = response.data.data;
            //   this.baseUrl = response.config.baseURL;
            //   // console.log(this.baseUrl);
            // })
            this.hi()

        }
};
</script>
<style lang="less" scoped>
.time_line_box {
  width: 100%;
//   height: 100%;
  // margin: 0 auto;
  padding: 0 13%;
//   border: 1px solid #ccc;
 .header1 ,.header2,.header3{
      margin: 10px auto;
    }
  .header1 {
    width: 22px;
    height: 22px;
    background: #ffffff;
    border: 2px solid rgba(58, 100, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .header_garden1 {
      display: inline-block;
      width: 14px;
      height: 14px;
      background: rgba(58, 100, 255, 0.3);
      border-radius: 50%;
    }
  }
  .header2 {
    width: 26px;
    height: 26px;
    background: #ffffff;
    border: 2px solid rgba(58, 100, 255, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .header_garden2 {
      display: inline-block;
      width: 18px;
      height: 18px;
      background: rgba(58, 100, 255, 0.7);
      border-radius: 50%;
    }
  }
  .header3 {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 2px solid #3a64ff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    .header_garden3 {
      display: inline-block;
      width: 22px;
      height: 22px;
      background: #3a64ff;
      border-radius: 50%;
    }
  }

  .time_line_header {
    position: relative;
    .header_text {
      position: absolute;
      left: 55%;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #515a6e;
      bottom: 3px;
    }
  }
  .time_line_body {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    .time_line_body_box {
      width: 100%;
      li {
        width: 100%;
      }
      .line_info {
        display: flex;
      }
      .line_garden {
        width: 140px;
        height: 140px;
        background: #ffffff;
        border: 4px solid rgba(58, 100, 255, 0.5);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto;
        .line_garden_child {
          width: 119px;
          height: 119px;
          background: #3a64ff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 42px;
        }
      }
      .line_box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 52px;
        margin: 15px 0;
        .line_left,
        .line_right {
          width: 50%;
          height: 100%;
        }
        .line_left {
          border-right: 2px solid #3a64ff;
        }
      }

    }
    .left,
    .right {
      width: 50%;
      min-height: 140px;
      max-height: 100%;
    }
    .left {
      border-right: 2px solid #3a64ff;
      position: relative;

      .content {
        width: 80%;
        background: rgba(58, 100, 255, 0.1);
        border-radius: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #515a6e;
        padding: 20px;
        line-height: 1.5;
        position: absolute;
        right: 40px;
        top: 38px;
        // word-break:break-all;
		   	// display:-webkit-box;
		   	// -webkit-line-clamp:2;
		   	// -webkit-box-orient:vertical;
		   	// overflow:hidden;
      }
    }
    .right {
      position: relative;
      .content {
        background: rgba(58, 100, 255, 0.1);
        border-radius: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #515a6e;
        padding: 20px;
        line-height: 1.5;
        position: absolute;
        left: 40px;
        top: 38px;
        // word-wrap: break-word;
        // word-break: normal;

        // word-break:break-all;
		   	// display:-webkit-box;
		   	// -webkit-line-clamp:2;
		   	// -webkit-box-orient:vertical;
		   	// overflow:hidden;

      }
    }
     .last ._garden {
         top: 140px;
         left: -15px;
     }
    ._garden {
        width: 32px;
        height: 32px;
        background: #ffffff;
        border: 2px solid #3a64ff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: -17px;
        top: 60px;
        .garden {
          display: inline-block;
          width: 22px;
          height: 22px;
          background: #3a64ff;
          border-radius: 50%;
        }
      }
  }
}
</style>
